﻿<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Simple-Product</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		
        <!-- all css here -->
        <!-- bootstrap v3.3.6 css -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- animate css -->
        <link rel="stylesheet" href="css/animate.css">
        <!-- jquery-ui.min css -->
        <link rel="stylesheet" href="css/jquery-ui.min.css">
        <!-- meanmenu css -->
        <link rel="stylesheet" href="css/meanmenu.min.css">
        <!-- nivo slider css -->
        <link rel="stylesheet" href="lib/css/nivo-slider.css" type="text/css" />
        <link rel="stylesheet" href="lib/css/preview.css" type="text/css" />
        <!-- owl.carousel css -->
        <link rel="stylesheet" href="css/owl.carousel.css">
        <!-- font-awesome css -->
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <!-- style css -->
        <link rel="stylesheet" href="style.css">
        <!-- responsive css -->
        <link rel="stylesheet" href="css/responsive.css">
        <!-- modernizr js -->
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>



        <!--header top area start-->
        <div class="header_area">
            <div class="header_border">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 col-lg-6 col-sm-6 col-xs-12">
                            <div class="header_heaft_area">
                                <div class="header_left_all">
                                    <div class="mean_al_dv">
                                        <div class="littele_menu"><a href="#">Language: English <i class="fa fa-caret-down"></i></a> </div>
                                        <ul class="option">
                                            <li><a href="#">France</a></li>
                                            <li><a href="#">Germany</a></li>
                                            <li><a href="#">Japanese</a></li>
                                        </ul>
                                    </div>
                                    <div class="usd_area">
                                        <div class="littele_menu"><a href="#">
                                            Currency: USD
                                            <i class="fa fa-caret-down"></i>
                                            </a>
                                        </div>
                                        <ul class="option">
                                            <li><a href="#">EUR - Euro</a></li>
                                            <li><a href="#">GBP - British Pound</a></li>
                                            <li><a href="#">INR - Indian Rupee</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-6 col-sm-6 col-xs-12">
                            <div class="header_right_area">
                                <ul>
                                    <li>
                                        <a class="account" href="my.account.html">My Account</a>
                                    </li>
                                    <li>
                                        <a class="wishlist" href="contact-us.html">wishlist</a>
                                    </li>
                                    <li>
                                        <a class="Shopping cart" href="cart.html">Shopping cart</a>
                                    </li>
                                    <li>
                                        <a class="Checkout" href="cart.html">Checkout</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--header top area end-->
            <!--header middle area start-->
            <div class="header_middle">
                <div class="container">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="logo_area">
                                <a href="index.html"><img src="img/logo-pic/logo.png" alt="" /></a>
                            </div>
                        </div>
                        <div class="col-md-9">
                            <div class="header_all search_box_area">
                                <div class="new_search" role="search" method="get">
                                    <input id="mix_search" class="search-field" placeholder="Search Products…" title="Search for:" type="search">
                                    <input value="Search" type="submit" id="Search-btn">
                                    <input name="" value="" type="hidden">
                                </div>
                            </div>
                            <div class="header_all shopping_cart_area">
                                <div class="widget_shopping_cart_content">
                                    <div class="topcart">
                                        <a class="cart-toggler" href="">
                                        <i class="icon"></i>
                                        <span class="my-cart">Shopping cart</span>
                                        <span class="qty">2 Items</span>
                                        <span class="fa fa-angle-down"></span>
                                        </a>
                                        <div class="new_cart_section">
                                            <ol class="new-list">
                                                <!-- single item -->
                                                <li class="wimix_area">
                                                    <a class="pix_product" href="">
                                                    <img alt="" src="img/product-pic/7-150x98.jpg">
                                                    </a>
                                                    <div class="product-details">
                                                        <a href="#">Adipiscing cursus eu</a>
                                                        <span class="sig-price">1×$300.00</span>
                                                    </div>
                                                    <div class="cart-remove">
                                                        <a class="action" href="#">
                                                        <i class="fa fa-close"></i>
                                                        </a>
                                                    </div>
                                                </li>
                                                <!-- single item -->
                                                <!-- single item -->
                                                <li class="wimix_area">
                                                    <a class="pix_product" href="#">
                                                    <img alt="" src="img/product-pic/1-150x98.jpg">
                                                    </a>
                                                    <div class="product-details">
                                                        <a href="#">Duis convallis</a>
                                                        <span class="sig-price">1×$100.00</span>
                                                    </div>
                                                    <div class="cart-remove">
                                                        <a class="action" href="#">
                                                        <i class="fa fa-close"></i>
                                                        </a>
                                                    </div>
                                                </li>
                                                <!-- single item -->
                                            </ol>
                                            <div class="top-subtotal">
                                                Subtotal: <span class="sig-price">$400.00</span>
                                            </div>
                                            <div class="top-subtotal">
                                                Subtotal: <span class="sig-price">$400.00</span>
                                            </div>
                                            <div class="cart-button">
                                                <ul>
                                                    <li>
                                                        <a href="cart.html">View my cart <i class="fa fa-angle-right"></i></a>
                                                    </li>
                                                    <li>
                                                        <a href="cart.html">Checkout <i class="fa fa-angle-right"></i></a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--header bottom area start-->
            <div class="all_menu_area">
                <div class="menu_inner">
                    <div class="container">
                        <div class="full_menu clearfix">
                            <div class="new_menu">
                                <div class="drp-menu">
                                    <div class="col-md-3 pr pl">
                                        <div class="all_catagories">
                                            <div class="enable_catagories">
                                                <i class="fa fa-bars"></i>
                                                <span>All Categories</span>
                                                <i class="fa fa-angle-down"></i>
                                            </div>
                                        </div>
                                        <div class="catagory_menu_area">
                                            <div class="catagory_mega_menu">
                                                <div class="cat_mega_start">
                                                    <ul class="list">
                                                        <li class="next_area">
                                                            <a class="item_link" href="#">
                                                            <i class="fa fa-television"></i>
                                                            <span class="link_content">
                                                            <span class="link_text">
                                                            Electronics
                                                            <span class="link_descr">Praesent accumsan elementum maximus </span>
                                                            </span>
                                                            </span>
                                                            </a>
                                                            <ul class="electronics_drpdown">
                                                                <li class="parent">
                                                                    <a href="#"></a>
                                                                    <div class="mega_menu">
                                                                        <div class="mega_menu_coloumn">
                                                                            <ul>
                                                                                <li><a href="#">Men's</a></li>
                                                                                <li><a href="#">Hats</a></li>
                                                                                <li><a href="#">Mirriors</a></li>
                                                                                <li><a href="#">Singles</a></li>
                                                                            </ul>
                                                                        </div>
                                                                        <div class="mega_menu_coloumn">
                                                                            <ul>
                                                                                <li><a href="#">Sports& Outdoors</a></li>
                                                                                <li><a href="#">Smartphones</a></li>
                                                                                <li><a href="#">Womens</a></li>
                                                                                <li><a href="#">Health & Beauty</a></li>
                                                                            </ul>
                                                                        </div>
                                                                        <div class="mega_menu_coloumn">
                                                                            <ul>
                                                                                <li class="mega_content">
                                                                                    <a href="#">Accessories</a>
                                                                                </li>
                                                                                <li><a href="#">Hobbies</a></li>
                                                                                <li><a href="#">networking</a></li>
                                                                                <li><a href="#">accessories</a></li>
                                                                                <li><a href="#">electronics</a></li>
                                                                            </ul>
                                                                        </div>
                                                                        <div class="mega_menu_coloumn">
                                                                            <ul>
                                                                                <li><a href="#">Laptops & Accessories</a></li>
                                                                                <li><a href="#">hoodies</a></li>
                                                                                <li><a href="#">watches</a></li>
                                                                                <li><a href="#">flashlights</a></li>
                                                                                <li><a href="#">mirriors</a></li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                        <li class="differ_sec_area">
                                                            <a class="item_link" href="#">
                                                            <i class="fa fa-mobile"></i>
                                                            <span class="link_content">
                                                            <span class="link_text">
                                                            Smartphone & Tablets
                                                            <span class="link_descr">Praesent accumsan elementum maximus </span>
                                                            </span>
                                                            </span>
                                                            </a>
                                                            <ul class="another_drop_menu">
                                                                <li class="discrip">
                                                                    <a class="new_link_2 with_icon" href="#" tabindex="1">Posters</a>
                                                                    <ul class="new_miup_menu">
                                                                        <li>
                                                                            <ul class="new_mixup_tm">
                                                                                <li class="exact">
                                                                                    <a class="new_link_8 with_icon" href="#" tabindex="1">Cocktail</a>
                                                                                    <ul class="decent_mean_menu">
                                                                                        <li>
                                                                                            <ul class="new_mixup_tm">
                                                                                                <li>
                                                                                                    <a href="#"></a>Cost & Jackets
                                                                                                </li>
                                                                                            </ul>
                                                                                        </li>
                                                                                    </ul>
                                                                                </li>
                                                                                <li><a href="#">Furniture</a></li>
                                                                            </ul>
                                                                        </li>
                                                                    </ul>
                                                                </li>
                                                                <li class="risk">
                                                                    <a class="new_link_2 new_link_3 with_icon" href="#" tabindex="1">Watches
                                                                    </a>
                                                                    <ul class="new_miup_menu">
                                                                        <li>
                                                                            <ul class="new_mixup_tm">
                                                                                <li><a href="#">Women's</a></li>
                                                                            </ul>
                                                                        </li>
                                                                    </ul>
                                                                </li>
                                                                <li><a href="#">Pendants</a></li>
                                                                <li><a href="#">Chocklates</a></li>
                                                            </ul>
                                                        </li>
                                                        <li class="differ_sec_area">
                                                            <a class="item_link " href="#">
                                                            <i class="fa fa-gift"></i>
                                                            <span class="link_content">
                                                            <span class="link_text">
                                                            Health & Beauty
                                                            <span class="link_descr">Praesent accumsan elementum maximus</span>
                                                            </span>
                                                            </span>
                                                            </a>
                                                            <ul class="another_drop_menu">
                                                                <li class="discrip">
                                                                    <a class="new_link_2 new_link_4 with_icon" href="#" tabindex="1">
                                                                    <i class="fa fa-futbol-o"></i>
                                                                    Sports & Outdoors
                                                                    </a>
                                                                </li>
                                                                <li class="discrip">
                                                                    <a class="new_link_2 new_link_4 with_icon" href="#" tabindex="1">
                                                                    <i class="fa fa-bullseye"></i>
                                                                    Bags, Shoes & Accessories
                                                                    </a>
                                                                </li>
                                                                <li class="discrip"><a class="new_link_2 new_link_4 with_icon" href="#" tabindex="1"><i class="fa fa-file-image-o"></i>
                                                                    Toys & Hobbies</a>
                                                                </li>
                                                                <li class="discrip">
                                                                    <a class="new_link_2 new_link_4 with_icon" href="#" tabindex="1"><i class="fa fa-television"></i>
                                                                    Computer & Networking</a>
                                                                </li>
                                                                <li class="discrip">
                                                                    <a class="new_link_2 new_link_4 with_icon" href="#" tabindex="1">
                                                                    <i class="fa fa-laptop"></i>
                                                                    Laptops & Accessories
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                        <li>
                                                            <a class="item_link item_link_2" href="#">
                                                            <i class="fa fa-heart"></i>
                                                            <span class="link_content">
                                                            <span class="link_text">
                                                            Jewelry & Watches
                                                            <span class="link_descr">Praesent accumsan elementum maximus</span>
                                                            </span>
                                                            </span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a class="item_link item_link_2" href="#">
                                                            <i class="fa fa-star"></i>
                                                            <span class="link_content">
                                                            <span class="link_text">
                                                            Flashlights & Lamps
                                                            <span class="link_descr">Praesent accumsan elementum maximus</span>
                                                            </span>
                                                            </span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a class="item_link item_link_2" href="#">
                                                            <i class="fa fa-lightbulb-o"></i>
                                                            <span class="link_content">
                                                            <span class="link_text">
                                                            Headlight
                                                            <span class="link_descr">Praesent accumsan elementum maximus</span>
                                                            </span>
                                                            </span>
                                                            </a>
                                                        </li>
                                                        <li class="cost-menu">
                                                            <a class="item_link item_link_2" href="#">
                                                            <i class="fa fa-pie-chart"></i>
                                                            <span class="link_content">
                                                            <span class="link_text">
                                                            Cost & jackets
                                                            <span class="link_descr">Praesent accumsan elementum maximus </span>
                                                            </span>
                                                            </span>
                                                            </a>
                                                        </li>
                                                        <li class="showmore-items shwitm">
                                                            <i class="fa fa-plus-square-o"></i>
                                                            <span>More Categories</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--menu area start-->
                                    <div class="col-md-9 pl">
                                        <div class="menu_area">
                                            <div class="menu">
                                                <nav>
                                                    <ul>
                                                        <li><a href="index.html">Home</a></li>
														<li><a href="about-us.html">About</a></li>
														<li><a href="cart.html">Cart</a></li>
														<li><a href="list-view.html">List</a></li>
														<li><a href="my.account.html">Account</a></li>
														<li><a href="simple-product.html">Product</a></li>
                                                        <li><a href="address.html">Address</a></li>
														<li><a href="contact-us.html">Contact us</a></li>
                                                    </ul>
                                                </nav>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--header area end-->
        <!-- mobile-menu-area-start -->
        <div class="mobile-menu-area hidden-md hidden-lg">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="mobile-menu">
                            <nav id="mobile-menu-active">
                                <ul id="nav">
                                    <li><a href="index.html">Home</a></li>
									<li><a href="about-us.html">About</a></li>
									<li><a href="cart.html">Cart</a></li>
									<li><a href="list-view.html">List</a></li>
									<li><a href="my.account.html">Account</a></li>
									<li><a href="simple-product.html">Product</a></li>
                                    <li><a href="address.html">Address</a></li>d
									<li><a href="contact-us.html">Contact us</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- mobile-menu-area-end -->
        <!--social design arae start-->
        <div class="link_area">
            <div class="container">
                <div class="row">
                    <div class="social_design on_right">
                        <ul>
                            <li>
                                <a class="facebook" target="_blank" href="#facebook">
                                <span>
                                <i class="fa fa-facebook"></i>
                                <span class="social-text">Follow via Facebook</span>
                                </span>
                                </a>
                            </li>
                            <li>
                                <a class="twitter" target="_blank" href="#twitter.com">
                                <span>
                                <i class="fa fa-twitter"></i>
                                <span class="social-text">Follow via Twitter</span>
                                </span>
                                </a>
                            </li>
                            <li>
                                <a class="google-plus" target="_blank" href="#google-plus">
                                <span>
                                <i class="fa fa-google-plus"></i>
                                <span class="social-text">Follow via Google +</span>
                                </span>
                                </a>
                            </li>
                            <li>
                                <a class="youtube" target="_blank" href="#youtube">
                                <span>
                                <i class="fa fa-youtube"></i>
                                <span class="social-text">Follow via Youtube</span>
                                </span>
                                </a>
                            </li>
                            <li>
                                <a class="pinterest" target="_blank" href="#pinterest">
                                <span>
                                <i class="fa fa-pinterest"></i>
                                <span class="social-text">Follow via Pinterest</span>
                                </span>
                                </a>
                            </li>
                            <li>
                                <a class="mail-to" target="_blank" href="mailto:lionthemes88@gmail.com">
                                <span>
                                <i class="fa fa-envelope-o"></i>
                                <span class="social-text">Mail To Us</span>
                                </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--social design arae end-->
        <!-- shop area start-->
        <div class="shop_area">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="shop_menu shop_menu_2">
                            <ul class="cramb_area cramb_area_5">
                                <li><a href="index.html">Home /</a></li>
                                <li><a href="index.html">Shop /</a></li>
                                <li><a href="index.html">Headlight/</a></li>
                                <li><a href="index.html">Hats /</a></li>
                                <li class="br-active">Cras nec nisl ut erat</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--zoom elavator area one start-->
        <div class="elavator_area">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                        <div class="elavetor">
                            <img id="#{id}" src="img/elavetor/small/l-8.jpg" data-zoom-image="img/elavetor/large/l-8.jpg" alt="">
                            <div class="al_zoom">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                        <div class="elav_titel">
                            <div class="elv_heading">
                                <h3 id="product-title">QAQ</h3>
                            </div>
                            <div class="price_rating">
                                <a href="#">
                                <i class="fa fa-star"></i>
                                </a>
                                <a href="#">
                                <i class="fa fa-star"></i>
                                </a>
                                <a href="#">
                                <i class="fa fa-star"></i>
                                </a>
                                <a href="#">
                                <i class="fa fa-star"></i>
                                </a>
                                <a class="not-rated" href="#">
                                <i class="fa fa-star-o"></i>
                                </a>
                                <a class="review-link" href="#">
                                (
                                <span class="count">2</span>
                                customer reviews)
                                </a>
                            </div>
                            <div class="evavet_description">
                                <p id="product-inf">还没有选择心仪的商品喔！！！</p>
                            </div>
                            <div class="elavetor_social">
                                <h3 class="widget-title">Share this product</h3>
                                <ul class="social-link">
                                    <li><a class="fb" data-original-title="facebook" href="#" title="" data-toggle="tooltip"><i class="fa fa-facebook"></i></a></li>
                                    <li><a class="twit" data-original-title="twitter" href="#" title="" data-toggle="tooltip"><i class="fa fa-twitter"></i></a></li>
                                    <li><a class="pinter" data-original-title="pinterest" href="#" title="" data-toggle="tooltip"><i class="fa fa-pinterest"></i></a></li>
                                    <li><a class="google+" href="#" title="Google+" data-target="#productModal" data-toggle="tooltip"><i class="fa fa-google-plus"></i></a></li>
                                    <li><a class="lindin" href="#" title="LinkedIn" data-target="#productModal" data-toggle="tooltip"><i class="fa fa-linkedin"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                        <div class="elav_info">
                            <div class="price_box price_box_acr">
                                <span class="spical-price spical-price-2" id="product-sell-point">$99999.99</span>
                                <span class="spical-price spical-price-2" id="product-price">$99999.99</span>
                            </div>
                            <form class="cart-btn-area" action="post">
                                <input type="number" value="1" id="num">
                                <button id="add_to_cart" class="add-tocart cart_zpf" type="submit" href="cart.html">Add to cart</button>
                            </form>
                            <div class="add_defi">
                                <a href="#" data-original-title="Add to Wishlist" data-toggle="tooltip">
                                <i class="fa fa-heart another_icon"></i>
                                Add to Wishlist
                                </a>
                            </div>
                            <div class="add_defi_2">
                                <a data-original-title="Compare" title="" data-toggle="tooltip" rel="nofollow" data-product_id="45" href=""><i class="fa fa-refresh another_icon"></i> Compare</a>
                            </div>
                            <div class="new_meta">
                                <span class="sku_wrapper">
                                SKU:
                                <span class="sku">W-hat-8</span>
                                </span>
                                <span class="posted_in">
                                Categories:
                                <a rel="tag" href="#">Accessories</a>
                                ,
                                <a rel="tag" href="#">Hats</a>
                                </span>
                                <span class="tagged_as">
                                Tag:
                                <a rel="tag" href="#">fashion</a>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--zoom elavator area one end-->
        <!--tab area start-->
        <div class="tab_area_start">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12 text-right">
                        <div class="my-tabs">
                            <!-- Nav tabs -->
                            <ul class="favtabs favtabs-2 favtabs-nytr" role="tablist">
                                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Discription</a></li>
                                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Reviews </a></li>
                            </ul>
                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active" id="home">
                                    <div class="row">
                                        <div class="col-md-12 col-xs-12">
                                            <div class="tb_desc">
                                                <h2>商品描述</h2>
                                                <p id="product-discription">xxxx</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="profile">
                                    <div class="row">
                                        <div class="col-md-12 col-xs-12">
                                            <div class="tb_desc">
                                                <div class="review_area_heading">
                                                    <div id="comnt">
                                                        <h2>2 reviews for Cras nec nisl ut erat</h2>
                                                        <ol class="commentlist" id="review-list">
                                                            <li id="li-comment-22" class="comment even thread-even depth-1" itemscope="" >
                                                                <div id="comment-22" class="comment_container">
                                                                    <img class="avatar avatar-60 photo" width="60" height="60" src="img/icon/men_icon.jpg" alt="">
                                                                    <div class="comment-text">
                                                                        <div class="star-rating" title="Rated 4 out of 5" itemscope="">
                                                                            <div class="price_rating price_rating_2">
                                                                                <a href="#">
                                                                                <i class="fa fa-star"></i>
                                                                                </a>
                                                                                <a href="#">
                                                                                <i class="fa fa-star"></i>
                                                                                </a>
                                                                                <a href="#">
                                                                                <i class="fa fa-star"></i>
                                                                                </a>
                                                                                <a href="#">
                                                                                <i class="fa fa-star"></i>
                                                                                </a>
                                                                                <a class="not-rated" href="#">
                                                                                <i class="fa fa-star-o" aria-hidden="true"></i>
                                                                                </a>
                                                                                <span>
                                                                                <strong >4</strong>
                                                                                out of 5
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                        <p class="meta">
                                                                            <strong>admin</strong>
                                                                            –
                                                                            <time datetime="2015-12-16T15:26:49+00:00">December 16, 2015</time>
                                                                            :
                                                                        </p>
                                                                        <div class="description">
                                                                            <p>like</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </li>
                                                            <li  class="comment even thread-even depth-1" itemscope="">
                                                                <div class="comment_container">
                                                                    <img class="avatar avatar-60 photo" width="60" height="60" src="img/icon/men_icon.jpg" alt="">
                                                                    <div class="comment-text">
                                                                        <div class="star-rating" title="Rated 4 out of 5" itemscope="">
                                                                            <div class="price_rating price_rating_2">
                                                                                <a href="#">
                                                                                <i class="fa fa-star"></i>
                                                                                </a>
                                                                                <a href="#">
                                                                                <i class="fa fa-star"></i>
                                                                                </a>
                                                                                <a href="#">
                                                                                <i class="fa fa-star"></i>
                                                                                </a>
                                                                                <a href="#">
                                                                                <i class="fa fa-star"></i>
                                                                                </a>
                                                                                <a class="not-rated" href="#">
                                                                                <i class="fa fa-star-o" aria-hidden="true"></i>
                                                                                </a>
                                                                                <span>
                                                                                <strong>4</strong>
                                                                                out of 5
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                        <p class="meta">
                                                                            <strong >alex</strong>
                                                                            –
                                                                            <time datetime="2015-12-16T15:26:49+00:00">December 18, 2015</time>
                                                                            :
                                                                        </p>
                                                                        <div class="description">
                                                                            <p>google</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </li>
                                                        </ol>
                                                    </div>
                                                    <div class="review_form_area">
                                                        <div class="review_form">
                                                            <div class="revew_form_content">
                                                                <h3 id="reply-title" class="comment-reply-title">
                                                                    Add a review
                                                                    <small>
                                                                    <a id="cancel-comment-reply-link" style="display:none;" href="#" rel="nofollow">Cancel reply</a>
                                                                    </small>
                                                                </h3>
                                                                <div id="commentform">
                                                                    <p>你的评论</p>
                                                                    <input id="comment" type="text">
                                                                    <p>你的昵称</p>
                                                                    <input id="name" type="text">
                                                                    <p>你的电子邮箱</p>
                                                                    <input id="email" type="text">
                                                                    <div class="form-submit">
                                                                        <input id="sub" class="submt" value="提交评论" type="button">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--tab area end-->
        <!--product 2 area start-->
        <section class="product_area">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="all_product">
                            <div class="new_product">
                                <div class="product_heading">
                                    <i class="fa fa-paper-plane-o"></i>
                                    <span>Ralated Produtcs</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="product_tx">
                                    <div class="col-md-3">
                                        <div class="all-pros">
                                            <div class="single_product single_product_2">
                                                <span>hot</span>
                                            </div>
                                            <div class="sinle_pic">
                                                <a href="#">
                                                <img class="primary-img" src="img/top-pic/top_pic_6.jpg" alt="" />
                                                <img class="secondary-img" src="img/product-pic/product_pic_10.jpg" alt="" />
                                                </a>
                                            </div>
                                            <div class="product-action" data-toggle="modal" data-target="#myModal">
                                                <button type="button" class="btn btn-info btn-lg quickview" data-toggle="tooltip" title="Quickview">Quick View</button>   
                                            </div>
                                            <div class="product_content">
                                                <div class="usal_pro">
                                                    <div class="product_name_2">
                                                        <h2>
                                                            <a href="#">Purus felis</a>
                                                        </h2>
                                                    </div>
                                                    <div class="product_price">
                                                        <div class="price_rating">
                                                            <a href="#"><i class="fa fa-star"></i></a>
                                                            <a href="#"><i class="fa fa-star"></i></a>
                                                            <a href="#">
                                                            <i class="fa fa-star"></i>
                                                            </a>
                                                            <a href="#">
                                                            <i class="fa fa-star"></i>
                                                            </a>
                                                            <a href="#">
                                                            <i class="fa fa-star"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                    <div class="price_box">
                                                        <span class="spical-price">$200.00</span>
                                                    </div>
                                                    <div class="last_button_area last_button_area_px">
                                                        <ul class="add-to-links clearfix">
                                                            <li class="addwishlist">
                                                                <div class="yith-wcwl-add-button show" >
                                                                    <a class="add_to_wishlist" href="" rel="nofollow" data-product-id="45" data-product-type="external" data-toggle="tooltip" title="" data-original-title="Add to Wishlist"><i class="fa fa-heart"></i></a>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="new_act">
                                                                    <a class="button_act button_act_ct" data-quick-id="45" href="" title="" data-toggle="tooltip" data-original-title="Donec non est at">Go to Buy</a>
                                                                </div>
                                                            </li>
                                                            <li class="addcompare">
                                                                <div class="woocommerce product compare-button">
                                                                    <a class="compare button" href="" data-product_id="45" rel="nofollow" data-toggle="tooltip" title="" data-original-title="Compare"><i class="fa fa-refresh"></i></a>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3 ">
                                        <div class="all-pros all-pros-2">
                                            <div class="single_product single_product_2">
                                                <span>hot</span>
                                            </div>
                                            <div class="sinle_pic">
                                                <a href="#">
                                                <img class="primary-img" src="img/product-pic/product_pic_3.jpg" alt="" />
                                                <img class="secondary-img" src="img/product-pic/product_pic_4.jpg" alt="" />
                                                </a>
                                            </div>
                                            <div class="product-action" data-toggle="modal" data-target="#myModal">
                                                <button type="button" class="btn btn-info btn-lg quickview" data-toggle="tooltip" title="Quickview">Quick View</button>   
                                            </div>
                                            <div class="product_content">
                                                <div class="usal_pro">
                                                    <div class="product_name_2">
                                                        <h2>
                                                            <a href="#">Accumsan eli</a>
                                                        </h2>
                                                    </div>
                                                    <div class="product_price">
                                                        <div class="price_rating">
                                                            <a href="#"><i class="fa fa-star"></i></a>
                                                            <a href="#"><i class="fa fa-star"></i></a>
                                                            <a href="#">
                                                            <i class="fa fa-star"></i>
                                                            </a>
                                                            <a href="#"><i class="fa fa-star"></i>
                                                            </a>
                                                            <a class="not-rated" href="#">
                                                            <i class="fa fa-star-o" aria-hidden="true"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                    <div class="price_box">
                                                        <span class="spical-price">$100.00</span>
                                                    </div>
                                                    <div class="last_button_area last_button_area_px">
                                                        <ul class="add-to-links clearfix">
                                                            <li class="addwishlist">
                                                                <div class="yith-wcwl-add-button show" >
                                                                    <a class="add_to_wishlist" href="" rel="nofollow" data-product-id="45" data-product-type="external" data-toggle="tooltip" title="" data-original-title="Add to Wishlist"><i class="fa fa-heart"></i></a>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="new_act">
                                                                    <a class="button_act button_act_ct" data-quick-id="45" href="" title="" data-toggle="tooltip" data-original-title="Donec non est at">Add To Cart</a>
                                                                </div>
                                                            </li>
                                                            <li class="addcompare">
                                                                <div class="woocommerce product compare-button">
                                                                    <a class="compare button" href="" data-product_id="45" rel="nofollow" data-toggle="tooltip" title="" data-original-title="Compare"><i class="fa fa-refresh"></i></a>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="all-pros all-pros-3">
                                            <div class="single_product_3 ">
                                                <span>sale</span>
                                            </div>
                                            <div class="sinle_pic">
                                                <a href="#">
                                                <img class="primary-img" src="img/top-pic/top_pic_1.jpg" alt="" />
                                                <img class="secondary-img" src="img/top-pic/top_pic_1.jpg" alt="" />
                                                </a>
                                            </div>
                                            <div class="product-action" data-toggle="modal" data-target="#myModal">
                                                <button type="button" class="btn btn-info btn-lg quickview" data-toggle="tooltip" title="Quickview">Quick View</button>   
                                            </div>
                                            <div class="product_content">
                                                <div class="usal_pro">
                                                    <div class="product_name_2">
                                                        <h2>
                                                            <a href="#">Nam fringilla</a>
                                                        </h2>
                                                    </div>
                                                    <div class="product_price">
                                                        <div class="price_rating">
                                                            <a href="#"><i class="fa fa-star"></i></a>
                                                            <a href="#"><i class="fa fa-star"></i></a>
                                                            <a href="#">
                                                            <i class="fa fa-star"></i>
                                                            </a>
                                                            <a href="#">
                                                            <i class="fa fa-star"></i>
                                                            </a>
                                                            <a href="#">
                                                            <i class="fa fa-star"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                    <div class="price_box">
                                                        <span class="spical-price">$150.00</span>
                                                    </div>
                                                    <div class="last_button_area last_button_area_px">
                                                        <ul class="add-to-links clearfix">
                                                            <li class="addwishlist">
                                                                <div class="yith-wcwl-add-button show" >
                                                                    <a class="add_to_wishlist" href="" rel="nofollow" data-product-id="45" data-product-type="external" data-toggle="tooltip" title="" data-original-title="Add to Wishlist"><i class="fa fa-heart"></i></a>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="new_act">
                                                                    <a class="button_act button_act_ct" data-quick-id="45" href="" title="" data-toggle="tooltip" data-original-title="Donec non est at">Add To Cart</a>
                                                                </div>
                                                            </li>
                                                            <li class="addcompare">
                                                                <div class="woocommerce product compare-button">
                                                                    <a class="compare button" href="" data-product_id="45" rel="nofollow" data-toggle="tooltip" title="" data-original-title="Compare"><i class="fa fa-refresh"></i></a>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="all-pros all-pros-4">
                                            <div class="single_product single_product_2">
                                                <span>hot</span>
                                            </div>
                                            <div class="sinle_pic">
                                                <a href="#">
                                                <img class="primary-img" src="img/product-pic/product_pic_15.jpg" alt="" />
                                                <img class="secondary-img" src="img/product-pic/product_pic-14.jpg" alt="" />
                                                </a>
                                            </div>
                                            <div class="product-action" data-toggle="modal" data-target="#myModal">
                                                <button type="button" class="btn btn-info btn-lg quickview" data-toggle="tooltip" title="Quickview">Quick View</button>   
                                            </div>
                                            <div class="product_content">
                                                <div class="usal_pro">
                                                    <div class="product_name_2">
                                                        <h2>
                                                            <a href="#">Nam fringilla</a>
                                                        </h2>
                                                    </div>
                                                    <div class="product_price">
                                                        <div class="price_rating">
                                                            <a href="#"><i class="fa fa-star"></i></a>
                                                            <a href="#"><i class="fa fa-star"></i></a>
                                                            <a href="#">
                                                            <i class="fa fa-star"></i>
                                                            </a>
                                                            <a href="#"><i class="fa fa-star"></i>
                                                            </a>
                                                            <a href="#"><i class="fa fa-star"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                    <div class="price_box">
                                                        <span class="spical-price">$100.00</span>
                                                    </div>
                                                    <div class="last_button_area last_button_area_px">
                                                        <ul class="add-to-links clearfix">
                                                            <li class="addwishlist">
                                                                <div class="yith-wcwl-add-button show" >
                                                                    <a class="add_to_wishlist" href="" rel="nofollow" data-product-id="45" data-product-type="external" data-toggle="tooltip" title="" data-original-title="Add to Wishlist"><i class="fa fa-heart"></i></a>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="new_act">
                                                                    <a class="button_act button_act_ct" data-quick-id="45" href="" title="" data-toggle="tooltip" data-original-title="Donec non est at">Add To Cart</a>
                                                                </div>
                                                            </li>
                                                            <li class="addcompare">
                                                                <div class="woocommerce product compare-button">
                                                                    <a class="compare button" href="" data-product_id="45" rel="nofollow" data-toggle="tooltip" title="" data-original-title="Compare"><i class="fa fa-refresh"></i></a>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--product 2 area end-->
        <!--brand area start-->
        <div class="logo_area">
            <div class="container">
                <div class="row">
                    <div class="brand brand-2 brand-2-dt">
                        <div class="new_product">
                            <div class="product_heading product_heading_tf">
                                <i class="fa fa-coffee"></i>
                                <span>Brand Logo</span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="main_brand main_brand_tf">
                            <div class="all_brand indicator-brand indicator-brand-7">
                                <div class="col-md-12">
                                    <div class="brand_pix">
                                        <img src="img/brand-logo/logo_1.jpg" alt="" />
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="brand_pix">
                                        <img src="img/brand-logo/logo_2.jpg" alt="" />
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="brand_pix">
                                        <img src="img/brand-logo/logo_3.jpg" alt="" />
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="brand_pix">
                                        <img src="img/brand-logo/logo_4.jpg" alt="" />
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="brand_pix">
                                        <img src="img/brand-logo/logo_5.jpg" alt="" />
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="brand_pix">
                                        <img src="img/brand-logo/logo_6.jpg" alt="" />
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="brand_pix">
                                        <img src="img/brand-logo/logo_3.jpg" alt="" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--brand area end-->
        <!--newsletter area start-->
        <div class="all_news_letter">
            <div class="news_letter">
                <div class="news_middele">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="news_heading">
                                    <h3> newsletter </h3>
                                </div>
                                <div class="full_form">
                                    <form id="form-newsletter1" class="widget_wysija" method="post" action="#wysija">
                                        <p class="wysija-paragraph">
                                            <input name="wysija[user][email]" class="wysija-input validate[required,custom[email]]" title="Enter Your Mail..." placeholder="Enter Your Mail..." value="" id="form-validation-field-0" style="" type="text">
                                        </p>
                                        <input class="wysija-submit wysija-submit-field" value="Subscribe!" type="submit">
                                    </form>
                                </div>
                            </div>
                            <div class="col-md-6 col-xs-12">
                                <div class="news_right">
                                    <div class="news_heading news_heading_3">
                                        <h3>Follow us:</h3>
                                    </div>
                                    <ul class="social-icons">
                                        <li>
                                            <a class="facebook social-icon" href="#facebook" title="" target="_blank" data-toggle="tooltip" data-original-title="Facebook">
                                            <i class="fa fa-facebook"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="twitter social-icon" href="#twitter.com" title="" target="_blank" data-toggle="tooltip" data-original-title="Twitter">
                                            <i class="fa fa-twitter"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="google-plus social-icon" href="#google-plus" title="" target="_blank" data-toggle="tooltip" data-original-title="Google-plus">
                                            <i class="fa fa-google-plus"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="youtube social-icon" href="#youtube" title="" target="_blank" data-toggle="tooltip" data-original-title="Youtube">
                                            <i class="fa fa-youtube"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="social-icon instagram" href="#" title="" target="_blank" data-toggle="tooltip" data-original-title="instagram">
                                            <i class="fa fa-instagram"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--newsletter area end-->
        <!--footer top area start-->
        <div class="footer_area">
            <div class="container">
                <div class="row">
                    <div class="col-md-3 col-sm-6">
                        <div class="footer_menu">
                            <div class="news_heading_2">
                                <h3>Information </h3>
                            </div>
                            <div class="footer_menu">
                                <ul>
                                    <li>
                                        <a href="#">our blog</a>
                                    </li>
                                    <li>
                                        <a href="#">about our shop</a>
                                    </li>
                                    <li>
                                        <a href="#">secure shopping</a>
                                    </li>
                                    <li>
                                        <a href="#">privecy policy</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="footer_menu">
                            <div class="news_heading_2">
                                <h3>My Account </h3>
                            </div>
                            <div class="footer_menu">
                                <ul>
                                    <li>
                                        <a href="my.account.html">My Account</a>
                                    </li>
                                    <li>
                                        <a href="contact-us.html">Wishlist</a>
                                    </li>
                                    <li>
                                        <a href="cart.html">Shopping Cart</a>
                                    </li>
                                    <li>
                                        <a href="cart.html">Checkout</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="footer_menu">
                            <div class="news_heading_2">
                                <h3> Our Services </h3>
                            </div>
                            <div class="footer_menu">
                                <ul>
                                    <li>
                                        <a href="#">Shipping & Returns</a>
                                    </li>
                                    <li>
                                        <a href="#">Secure Shopping</a>
                                    </li>
                                    <li>
                                        <a href="#">International Shipping</a>
                                    </li>
                                    <li>
                                        <a href="#">Affiliates</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="footer_menu footer_menu_2">
                            <div class="news_heading_2">
                                <h3> Store Information </h3>
                            </div>
                            <ul>
                                <li>
                                    <i class="fa fa-home"></i>
                                    <p>My Company : 42 avenue des Champs Elysées 75000 France</p>
                                </li>
                                <li>
                                    <i class="fa fa-phone"></i>
                                    <p>Phone: (0123) 456789</p>
                                </li>
                                <li>
                                    <i class="fa fa-envelope"></i>
                                    <p>Email: admin@hastech.company</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!--footer top area end-->
            <!--footer middle area start-->
            <div class="footer_middle">
                <div class="container">
                    <div class="fotter_inner">
                        <div class="middele_pic">
                            <img src="img/icon/payment-300x30.png" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--footer middle area end-->
        <!--footer bottom area start-->
        <div class="footer-bottom">
            <div class="container">
                <div class="widget-copyright text-center">
                    Copyright &copy; 2017.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
                </div>
            </div>
        </div>
        <!-- all js here -->
        <!--modal content start-->
        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="modal-product">
                            <div class="row">
                                <div class="new_port new_port_2">
                                    <div class="port_pix">
                                        <img src="img/product-pic/product_pic_2.jpg" alt="">
                                    </div>
                                </div>
                                <div class="elav_titel elav_titel_2">
                                    <div class="elv_heading elv_heading_therteen">
                                        <h3>Donec non est at</h3>
                                    </div>
                                    <div class="elav_info">
                                        <div class="price_box price_box_pb">
                                            <span class="spical-price spical-price-nk">$250.00</span>
                                        </div>
                                        <form class="cart-btn-area cart-btn-area-dec" action="#">
                                            <a class="see-all" href="#">See all features</a><br>
                                            <input type="number" value="1">
                                            <button class="add-tocart add-tocart-2" type="submit">Add to cart</button>
                                        </form>
                                    </div>
                                    <div class="evavet_description evavet_description_dec">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce posuere metus vitae arcu imperdiet, id aliquet ante scelerisque. Sed sit amet sem vitae urna fringilla tempus.</p>
                                    </div>
                                    <div class="elavetor_social">
                                        <h3 class="widget-title">Share this product</h3>
                                        <br>
                                        <ul class="social-link social-link-bbt">
                                            <li><a class="fb" data-original-title="facebook" href="#" title="" data-toggle="tooltip"><i class="fa fa-facebook"></i></a></li>
                                            <li><a class="twit" data-original-title="twitter" href="#" title="" data-toggle="tooltip"><i class="fa fa-twitter"></i></a></li>
                                            <li><a class="pinter" data-original-title="pinterest" href="#" title="" data-toggle="tooltip"><i class="fa fa-pinterest"></i></a></li>
                                            <li><a class="google+" href="#" title="Google+" data-target="#productModal" data-toggle="tooltip"><i class="fa fa-google-plus"></i></a></li>
                                            <li><a class="lindin" href="#" title="LinkedIn" data-target="#productModal" data-toggle="tooltip"><i class="fa fa-linkedin"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--modal content end-->
		
		
		
		
		
		
        <!-- jquery latest version -->
        <script src="js/vendor/jquery-1.12.0.min.js"></script>
        <!-- bootstrap js -->
        <script src="js/bootstrap.min.js"></script>
        <!-- nivo slider js -->
        <script src="lib/js/jquery.nivo.slider.js" type="text/javascript">           </script>
        <script src="lib/home.js" type="text/javascript"></script>
        <!-- owl.carousel js -->
        <script src="js/owl.carousel.min.js"></script>
        <!-- meanmenu js -->
        <script src="js/jquery.meanmenu.js"></script>
        <!-- jquery-ui js -->
        <script src="js/jquery-ui.min.js"></script>
        <!-- easing js -->
        <script src="js/jquery.easing.1.3.js"></script>
        <!-- mixitup js -->
        <script src="js/jquery.mixitup.min.js"></script>
        <!-- jquery.countdown js -->
        <script src="js/jquery.countdown.min.js"></script>
        <!-- wow js -->
        <script src="js/wow.min.js"></script>
        <!-- popup js -->
        <script src="js/jquery.magnific-popup.min.js"></script> 
        <!-- plugins js -->
        <script src="js/plugins.js"></script>
        <!-- main js -->
        <script src="js/main.js"></script>
        <script type="text/javascript" src="js/jquery-getUrlParam.js"></script>
        <script type="text/javascript">
            $("div[class='elavetor']").empty()
            let id = $.getUrlParam("id");
            console.log("id=" + id);
            $(document).ready(function() {
                $.ajax({
                    url: "/products/" + id + "/details",
                    type: "GET",
                    dataType: "JSON",
                    success: function(json) {
                        if (json.state == 200) {
                            console.log("title=" + json.data.title);
                            $("#product-title").html(json.data.title);
                            $("#product-sell-point").html(json.data.sellPoint);
                            $("#product-price").html('￥' + json.data.price);
                            $("#product-inf").html(json.data.title + json.data.sellPoint);
                            $("#product-discription").html(json.data.title + json.data.sellPoint);
                            let show_html = '<img id="#{id}" src="..#{image}collect.png" data-zoom-image="..#{image}collect.png" alt="" height="360px" width="240px"><div class="al_zoom"></div>'
                            show_html = show_html.replace(/#{image}/g, json.data.image);
                            $("div[class='elavetor']").append(show_html)
                        } else if (json.state == 4006) { // 商品数据不存在的异常
                            location.href = "index.html";
                        } else {
                            alert("获取商品信息失败！" + json.message);
                        }
                    }
                });
            });


            $("#add_to_cart").click(function() {
                $.ajax({
                    url: "/carts/add_to_cart",
                    type: "POST",
                    data: {
                        "pid": id,
                        "amount": $("#num").val()
                    },
                    dataType: "JSON",
                    success: function(json) {
                        if (json.state == 200) {
                            alert("增加成功！");
                            location.href="cart.html";
                        } else {
                            alert("增加失败！" + json.message);
                        }
                    },
                    error: function(xhr) {
                        alert("您的登录信息已经过期，请重新登录！HTTP响应码：" + xhr.status);
                        location.href = "index.html";
                    }
                });
            });
        </script>
        <script type="text/javascript">

            $("#Search-btn").click(function () {
                let title = $("#mix_search").val();
                console.log(title)
                location.href = "Search-list.html?title="+title;
            });

        </script>
    <script type="text/javascript">
        let pid = $.getUrlParam("id");
        $(document).ready(function() {
            showReview();
        });
        function showReview(){
            $("#review-list").empty();
            $.ajax({
                url: "reviews/findReview/"+ pid ,
                type: "POST",
                dataType: "JSON",
                success: function (json) {
                    let list = json.data;
                    console.log("count=" + list.length);
                    for (let i = 0; i < list.length; i++) {
                        console.log(list[i].title);
                        let html = '<li  class="comment even thread-even depth-1" itemscope="" >' +
                            '    <div id="comment-22" class="comment_container">' +
                            '        <img class="avatar avatar-60 photo" width="60" height="60" src="img/icon/men_icon.jpg" alt="">' +
                            '        <div class="comment-text">' +
                            '            <div class="star-rating" title="Rated 4 out of 5" itemscope="">' +
                            '                <div class="price_rating price_rating_2">' +
                            '                    <a href="#">' +
                            '                    <i class="fa fa-star"></i>' +
                            '                    </a>' +
                            '                    <a href="#">' +
                            '                    <i class="fa fa-star"></i>' +
                            '                    </a>' +
                            '                    <a href="#">' +
                            '                    <i class="fa fa-star"></i>' +
                            '                    </a>' +
                            '                    <a href="#">' +
                            '                    <i class="fa fa-star"></i>' +
                            '                    </a>' +
                            '                    <a class="not-rated" href="#">' +
                            '                    <i class="fa fa-star-o" aria-hidden="true"></i>' +
                            '                    </a>' +
                            '                    <span>' +
                            '                    <strong >4</strong>' +
                            '                    out of 5' +
                            '                    </span>' +
                            '                </div>' +
                            '            </div>' +
                            '            <p class="meta">' +
                            '                <strong>#{name}</strong>' +
                            '                –' +
                            '                <time datetime="2015-12-16T15:26:49+00:00">#{createdTime}</time>' +
                            '                :' +
                            '            </p>' +
                            '            <div class="description">' +
                            '                <p>#{review}</p>' +
                            '            </div>' +
                            '<a onclick="delete_review(#{pid}, #{rid})" class="btn btn-xs add-del btn-info"><span class="fa fa-trash-o"></span> 删除</a>'+
                            '        </div>' +
                            '    </div>' +
                            '</li>'

                        html = html.replace(/#{name}/g, list[i].name);
                        html = html.replace(/#{review}/g, list[i].review);
                        html = html.replace(/#{createdTime}/g, list[i].createdTime);
                        html = html.replace(/#{pid}/g, list[i].pid);
                        html = html.replace(/#{rid}/g, list[i].rid);
                        $("#review-list").append(html);
                    }
                }
            });
        }
    </script>
        <script type="text/javascript">
            $("#sub").click(function () {
                let pid = $.getUrlParam("id");
                let name = $("#name").val();
                let email = $("#email").val();
                let review = $("#comment").val();
                console.log($("#commentform").serialize());
                $.ajax({
                    url:"/reviews/addreview" + "/" + pid + "/" + name + "/" + review + "/" + email,
                    type:"POST",
                    data: $("#commentform").serialize(),
                    dataType:"json",
                    success: function (json) {
                        if (json.state == 200){
                            alert("添加评论成功！");
                           showReview();
                        } else {
                            alert("添加评论失败" + json.message);
                        }
                    }
                });
            });
        </script>
        </script>
        <script type="text/javascript">
            function delete_review(mid, rid) {
                $.ajax({
                    url: "reviews/delete" + "/" + pid + "/" + rid,
                    type: "POST",
                    dataType: "JSON",
                    success: function(json) {
                        if (json.state == 200) {
                            alert("添加评论成功！")
                            showReview();
                        } else {
                            alert("删除评论失败！" + json.message);
                        }
                    },
                });
            }
        </script>
    </body>
</html>


